<template>
<div>
  <el-table
    v-if="hask"
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="type_name"
      label="品牌"
      width="180">
    </el-table-column>
    <el-table-column label="操作"  align="center">
        <template slot-scope="scope">
        <el-button
            size="mini"
            @click="updataShow(scope.$index, scope.row)">型号
        </el-button>
        <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除
        </el-button>
        </template>
    </el-table-column>
  </el-table>
  <div  v-else>
      <p style="display: flex;">
         <el-button class="left" type="success" @click="add()" size="small" icon="el-icon-plus">新增</el-button>
      </p>
      <div class="formTitle">
        <span>请输入查询条件</span>
        <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="生产批次" >
                <el-input  v-model="ruleForm.batch" ></el-input>
            </el-form-item>
            <el-form-item label="轮胎规格">
                <el-input  v-model="ruleForm.tire" ></el-input>
            </el-form-item>
            <el-form-item label="dot号" >
                <el-input v-model.number="ruleForm.dot"></el-input>
            </el-form-item>
            <el-form-item style="display:block">
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
      </div>
    <el-table
        :data="series"
        stripe
        style="width: 100%">
        <el-table-column
            prop="tire_types_name"
            label="品牌"
            width="160">
        </el-table-column>
        <el-table-column
            prop="specifications"
            label="规格"
            width="260">
        </el-table-column>
        <el-table-column
            prop="batchs"
            label="批次"
            >
        </el-table-column>
        <el-table-column
            prop="dot_number"
            label="dot号"
            >
        </el-table-column>
        <el-table-column
            prop="prices"
            label="购置价"
            width="100">
        </el-table-column>
        <el-table-column label="操作"  align="center">
            <template slot-scope="scope">
            <el-button
                size="mini"
                @click="editTire(scope.index,scope.row)"
            >编辑
            </el-button>
            <el-button
                size="mini"
                type="danger"
                @click="deleteTire(scope.index,scope.row)"
            >删除
            </el-button>
            </template>
        </el-table-column>
    </el-table>
  </div>
  <el-dialog :title="addTitle" :visible.sync="editVisible">
    <el-form :model="form">
        <el-form-item label="品牌" :label-width="formLabelWidth">
            <el-input v-model="form.tire_types_name" ></el-input>
        </el-form-item>
        <el-form-item label="轮胎规格" :label-width="formLabelWidth">
            <el-input v-model="form.specifications" ></el-input>
        </el-form-item>
        <el-form-item label="轮胎批次" :label-width="formLabelWidth">
            <el-input v-model="form.batchs"></el-input>
        </el-form-item>
        <el-form-item label="dot号" :label-width="formLabelWidth">
            <el-input v-model="form.dot_number"></el-input>
        </el-form-item>
        <el-form-item label="购置价" :label-width="formLabelWidth">
            <el-input v-model="form.prices"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="addTitle== '新增信息'?addSublime(form):updataSublime(form)">确 定</el-button>
    </div>
    </el-dialog>
</div>
</template>

<script>
  export default {
    props:['tableData'],
    data() {
      return {
        series:null,
        hask:true,
        ruleForm:{
            batch:"",
            tire:'',
            dot:''
        },
        addTitle:'新增信息',
        typeId:'',
        pId:'',
        type_name:'',
        editVisible:false,
        form:{
            tire_types_name:'',
            specifications:'',
            batchs:'',
            dot_number:'',
            prices:''
        },
        formLabelWidth: '120px'
      }
    },
    methods: {
        /**获取轮胎类型信息 */
        updataShow(index,row){
          this.hask = false
            this.$http.get(this.GLOBAL.REQUESTURL +"/car/tire_info/",{tire_types_id:row.id})
            .then( res =>{
                this.series = res
                this.type_name = row.type_name
                this.typeId = row.id
            })
        },
        /**品牌删除 */
        handleDelete(index,row){
            this.$confirm('是否要删除该品牌', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
            this.$http.deleteFn(this.GLOBAL.REQUESTURL +"/car/tire_brand/"+row.id+'/').then(response => {
                this.$message({
                message: '删除成功',
                type: 'success',
                duration: 1000
                });
            });
            });
        },
        /**类型删除 */
        deleteTire(index,row){
            this.$confirm('是否要删除该类型', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
            this.$http.deleteFn(this.GLOBAL.REQUESTURL +"/car/tire_info/"+row.id+'/').then(response => {
                this.$message({
                message: '删除成功',
                type: 'success',
                duration: 1000
                });
            });
            });
        },
        editTire(index,row){
            this.addTitle = '修改信息'
            this.editVisible = true
            this.pId = row.id
            this.form = row 
        },
        add(){
            this.addTitle = '新增信息'
            this.editVisible = true
            this.form.tire_types_name = this.type_name
        },
        /**查询 */
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$http.get(this.GLOBAL.REQUESTURL +"/car/tire_info/",{dot_number:this.ruleForm.dot,batchs:this.ruleForm.batch,specifications:this.ruleForm.tire})
            .then(res=>{
                this.series = res
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      /**添加 */
      addSublime(formName) {
        let param = {
            tire_types:this.typeId,
            dot_number:this.form.dot_number,
            batchs:this.form.batchs,
            prices: this.form.prices,
            specifications:this.form.specifications
        };
        this.$http.post(this.GLOBAL.REQUESTURL +"/car/tire_info/",param)
        this.editVisible = false
      },
      /**修改 */
      updataSublime(formName) {
        this.$http.put(this.GLOBAL.REQUESTURL +"/car/tire_info/"+this.pId+'/',this.form)
        this.editVisible = false
        this.form = {}
      },
      resetForm(formName) {
         this[formName] = {};
      },
      close(){
         this.editVisible = false 
         this.form = {}
      }
    }
  }
</script>
<style scoped>
    .formTitle {
        border: 1px solid #BCE8F1;
        border-radius: 5px;
        margin: auto;
    }
    .formTitle span {
        display: block;
        text-align: left;
        margin-bottom: 20px;
        line-height: 50px;
        background-color: #D9EDF7;
    }
    .el-form {
        text-align: left;
    }
    .el-form-item {
        width: 40%;
        display: inline-block;
    }
</style>
